
import React, {Fragment} from 'react';
import 'rc-banner-anim/assets/index.css';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import css from './index.less';
import {FEED} from 'utils/feedFunc';
import Detail from 'components/page/detail';

import videoBg from 'assert/img/videoBg.jpg';
import poster1 from 'assert/img/poster1.jpg';
import poster2 from 'assert/img/poster2.jpg';
import poster3 from 'assert/img/poster3.jpg';


export default class VideoList extends React.Component {

  static propTypes = {
    switchRoute: PropTypes.func,
    itemDetail: PropTypes.array,
  };

  static defaultProps = {
    videoList: [
      {
        src: '//cloud.video.taobao.com//play/u/859672019/p/1/e/6/t/1/50186008119.mp4',
        pos: poster1,
      },
      {
        src: '//cloud.video.taobao.com//play/u/859672019/p/1/e/6/t/1/50185820523.mp4',
        pos: poster2,
      },
      {
        src: '//cloud.video.taobao.com//play/u/859672019/p/1/e/6/t/1/50185834509.mp4',
        pos: poster3,
      }
    ],
    goodsItem: [
      {
        id: '45929200448',
        lei: 2,
        style: {
          left: 720,
          top: 460,
        }
      },
      {
        id: '570429699581',
        lei: 1,
        style: {
          left: 100,
          top: 890,
        }
      },
      {
        id: '568463376863',
        lei: 3,
        style: {
          left: 720,
          top: 1334,
        }
      }
    ],

  };


  constructor(props) {
    super(props);
    this.state = {
      playNum: -1,
      showDetail: false,
      detailsId: 0,
      lei: 1,
    };
    this.itemDetail = props.itemDetail.slice(0);
    props.videoList.forEach((item, index) => {
      this[`video${index}`] = React.createRef();
    });

  }

  componentDidMount() {

  }

  componentWillUnmount() {

  }

  renderVideo = (item, index) =>{

    const {playNum} = this.state;

    const videoProps = {
      className: css[`video${index}`],
      src: item.src,
      controls: true,
      // poster: poster1,
      onEnded: () => {
        // console.log(index);
        this.setState({
          playNum: -1,
        });
      },
      ref: this[`video${index}`],
    };

    const imgProps = {
      className: css[`poster${index}`],
      src: item.pos,
      onClick: () => {
        this.setState({
          playNum: index,
        }, () => this[`video${index}`].current.play());
      }

    };

    return (
      <Fragment key={index}>
        {
          playNum === index && <video {...videoProps}/>
        }
        {
          playNum !== index && <img {...imgProps}/>
        }
      </Fragment>
    );
  };

  renderGoodsHot = (item, index) => {
    const props = {
      key: index,
      style: {
        ...item.style,
        position: 'absolute',
        width: 300,
        height: 200,
        // backgroundColor: '#ff00ff'
      },
      onClick: () => {
        this.setState({
          detailsId: item.id,
          lei: item.lei,
          showDetail: true
        });
      },
    };
    return (
      <div {...props}/>
    );
  };


  render() {

    const {switchRoute, route, videoList, goodsItem} = this.props;
    const {detailsId, showDetail, lei} = this.state;
    let detail = this.itemDetail[lei];

    const video = {
      // autoPlay: true,
      // controls: true,
      // loop: true,
    };

    const detailProps = {
      detailsId,
      itemDetail: detail.goods,
      hidden: () => {
        this.setState({
          showDetail: false,
        });
        FEED('');
      },

    };



    return (
      <div>
        <img src={videoBg} className={css.bg}/>
        {
          videoList.map((item, index) => this.renderVideo(item, index))
        }
        {
          goodsItem.map((item, index) => this.renderGoodsHot(item, index))
        }
        <div className={css.rightBtn} onClick={() => route('Slider')}/>
        <div className={css.leftBtn} onClick={() => switchRoute('FrontPage')}/>
        <div className={css.botBtn} onClick={() => switchRoute('FrontPage')}/>
        {
          showDetail && <Detail {...detailProps}/>
        }
      </div>

    );
  }
}
